<route type="home" lang="json">{
  "style": {
    "navigationBarTitleText": "首页",
    "navigationStyle": "custom",
    "backgroundColor": "#0f1419"
  }
}</route>

<template>
  <view class="home-container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-content">
        <text class="navbar-title">首页</text>
      </view>
    </view>

    <!-- 主背景 -->
    <view class="main-bg">
      <image class="bg-image" src="@/static/img/index/Group 1410136103.png" mode="aspectFill" />
    </view>

    <!-- 日期和时间信息 -->
    <view class="date-section" style="position: relative;">
      <view class="lunar-date">腊月初八</view>
      <view class="date-info">
        <text class="date">{{ currentDate }}</text>
        <text class="weekday">星期{{ weekday }}</text>
      </view>
      <view class="date-info">
        <text class="date">运势生肖：鼠</text>
        <text class="weekday">运势星座：摩羯座</text>
      </view>
    </view>
    <!-- 测算功能区域 -->
    <view class="calculation-section">
      <view class="section-title">
        <view>测算</view>
      </view>
      <view class="calculation-grid">
        <view class="calc-item" @click="navigateTo('palm')">
          <image class="calc-bg" src="@/static/img/index/Group 1410136094.png" />
          <text class="calc-title">手相</text>
          <text class="calc-subtitle">测算</text>
        </view>
        <view class="calc-item" @click="navigateTo('marriage')">
          <image class="calc-bg" src="@/static/img/index/Group 1410136095.png" />
          <text class="calc-title">姻缘</text>
          <text class="calc-subtitle">测算</text>
        </view>
        <view class="calc-item" @click="navigateTo('career')">
          <image class="calc-bg" src="@/static/img/index/Group 1410136096.png" />
          <text class="calc-title">生辰</text>
          <text class="calc-subtitle">精算</text>
        </view>
        <view class="calc-item" @click="navigateTo('face')">
          <image class="calc-bg" src="@/static/img/index/Group 1410136099.png" />
          <text class="calc-title">面相</text>
          <text class="calc-subtitle">测算</text>
        </view>
        <view class="calc-item" @click="navigateTo('future')">
          <image class="calc-bg" src="@/static/img/index/Group 1410136097.png" />
          <text class="calc-title">未来</text>
          <text class="calc-subtitle">运势</text>
        </view>
        <view class="calc-item" @click="navigateTo('dress')">
          <image class="calc-bg" src="@/static/img/index/Group 1410136098.png" />
          <text class="calc-title">装饰</text>
          <text class="calc-subtitle">开运</text>
        </view>
      </view>
    </view>

    <!-- 星座运势 -->
    <view class="constellation-section">
      <view class="section-header">
        <view class="section-title long">
          <view>星座运势</view>
        </view>
        <view class="more-btn" @click="navigateTo('constellation')">
          <text class="more-text">查看详情</text>
          <uv-icon name="arrow-right"></uv-icon>
        </view>
      </view>
      <view class="flex gap-2" style="font-size: 20px;">
        <text class="constellation-name">摩羯座</text>
        <uv-icon name="arrow-down"></uv-icon>
      </view>
      <view class="constellation-card">

        <view class="constellation-content">
          <view class="constellation-main">
            <view class="flex gap-4 items-center">
              <view style="width: 62px;height: 62px;background: rgba(255,255,255,0.1);border-radius:50%;"></view>
              <view class="constellation-details">
                <text class="constellation-title">摩羯座</text>
                <text class="constellation-date">今日星座运势（1月7日）</text>
              </view>
            </view>

            <view class="fortune-ratings mt-4">
              <view class="rating-item">
                <text class="rating-label">综合运势</text>
                <view class="stars">
                  <uv-rate :value="3.7" gutter="1" readonly activeColor="#EDB05D" inactiveColor="#9195A1" size="16"
                    inactiveIcon="star-fill"></uv-rate>
                </view>
                <text class="rating-label">爱情运势</text>
                <view class="stars">
                  <uv-rate :value="3.7" gutter="1" readonly activeColor="#EDB05D" inactiveColor="#9195A1" size="16"
                    inactiveIcon="star-fill"></uv-rate>
                </view>
              </view>

              <view class="rating-item">
                <text class="rating-label">事业学业</text>
                <view class="stars">
                  <uv-rate :value="3.7" gutter="1" readonly activeColor="#EDB05D" inactiveColor="#9195A1" size="16"
                    inactiveIcon="star-fill"></uv-rate>
                </view>
                <text class="rating-label">财富运势</text>
                <view class="stars">
                  <uv-rate :value="3.7" gutter="1" readonly activeColor="#EDB05D" inactiveColor="#9195A1" size="16"
                    inactiveIcon="star-fill"></uv-rate>
                </view>
              </view>
            </view>

            <view class="lucky-items">
              <text class="lucky-label">幸运颜色</text>
              <text class="lucky-value">驼色</text>
              <text class="lucky-label">幸运数字</text>
              <text class="lucky-value">5</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 黄历 -->
    <view class="calendar-section">

      <view class="section-header">
        <view class="section-title">
          <view>黄历</view>
        </view>
        <view class="more-btn" @click="navigateTo('constellation')">
          <text class="more-text">查看详情</text>
          <uv-icon name="arrow-right"></uv-icon>
        </view>
      </view>

      <view class="calendar-card">
        <view style="position: absolute; right: 10px; top: -7px;">
          <image src="@/static/img/index/Group 1410136077.png" style="width: 47.54px;height: 59px;" mode="aspectFit" />
        </view>
        <view class="calendar-header">
          <view class="calendar-date flex juctify-end gap-4" style="padding: 0 10px;">
            <text class="lunar-text">腊月初八</text>
            <view class="flex justify-end items-center gap-2">
              <text class="solar-date">2025年1月7日</text>
              <uv-icon name="arrow-down"></uv-icon>
            </view>
          </view>
        </view>

        <view class="custom-card">
          <view class="calendar-content">
            <view class="calendar-item good">
              <text class="calendar-label">宜</text>
              <text class="calendar-text">交易 立券 祈福 安床 安机械池 造船 会亲友 设宴 高堂 立卷 认子 高垣合帐</text>
            </view>

            <view class="calendar-item bad">
              <text class="calendar-label">忌</text>
              <text class="calendar-text">交易 立券 祈福 安床 安机械池 造船 会亲友 设宴 高堂 立卷 认子 高垣合帐</text>
            </view>
          </view>

          <view class="time-info">
            <view class="time-row">
              <view class="time-item" v-for="(time, index) in timeData" :key="index">
                <text class="time-char">{{ time.char }}</text>
              </view>
            </view>
            <view class="time-row">
              <view class="time-item" v-for="(time, index) in timeData" :key="index">
                <text class="time-desc">{{ time.desc }}</text>
              </view>
            </view>
          </view>
        </view>

      </view>
    </view>

    <!-- 生肖运势 -->
    <view class="zodiac-section">
      <view class="section-header">
        <view class="section-title long">
          <view>生肖运势</view>
        </view>
        <view class="more-btn" @click="navigateTo('constellation')">
          <text class="more-text">查看详情</text>
          <uv-icon name="arrow-right"></uv-icon>
        </view>
      </view>


      <view class="zodiac-card">
        <view style="position: absolute; right: 10px; top: -7px;">
          <image src="@/static/img/index/Group 1410136078.png" style="width: 47.54px;height: 59px;" mode="aspectFit" />
        </view>
        <view class="zodiac-header">
          <view class="zodiac-info">
            <view style="width: 62px;height: 62px;background: rgba(255,255,255,0.1);border-radius:50%;"></view>
            <view class="zodiac-details">
              <text class="zodiac-name">属鼠：鼠</text>
              <text class="zodiac-percentage">综合运势：78%</text>
            </view>
          </view>
        </view>

        <view class="zodiac-fortune">
          <view class="fortune-row">
            <view class="fortune-item">
              <text class="fortune-label">避配生肖</text>
              <text class="fortune-value">猪</text>
            </view>
            <view class="fortune-item">
              <text class="fortune-label">幸运宝石</text>
              <text class="fortune-value">草绿石</text>
            </view>
          </view>

          <view class="fortune-row">
            <view class="fortune-item">
              <text class="fortune-label">幸运颜色</text>
              <text class="fortune-value">黄色</text>
            </view>
            <view class="fortune-item">
              <text class="fortune-label">幸运数字</text>
              <text class="fortune-value">73</text>
            </view>
          </view>
        </view>

        <view class="custom-card">
          <view class="zodiac-description">
            <text class="description-text">
              【今日运势】今日的运势显示，你将迎来一天清爽和谐的时光。可能是由于你的努力，遇到某有特殊魅力的人，今天一切都在回到某种意识状态。
            </text>
          </view>
        </view>

      </view>
    </view>

    <!-- 底部导航 -->
    <view class="bottom-nav">
      <view class="nav-item active">
        <image class="nav-icon" src="@/static/img/index/Group 289.png" />
        <text class="nav-text">首页</text>
      </view>
      <view class="nav-item">
        <image class="nav-icon" src="@/static/img/index/Group 3010.png" />
        <text class="nav-text">商城</text>
      </view>
      <view class="nav-item">
        <image class="nav-icon" src="@/static/img/index/Group 3033.png" />
        <text class="nav-text">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentDate: '',
      weekday: '',
      timeData: [
        { char: '戊', desc: '吉' },
        { char: '戌', desc: '吉' },
        { char: '戊', desc: '吉' },
        { char: '戌', desc: '吉' },
        { char: '戊', desc: '吉' },
        { char: '戌', desc: '吉' },
        { char: '戊', desc: '吉' },
        { char: '戌', desc: '吉' },
        { char: '戊', desc: '吉' },
        { char: '乙', desc: '凶' }
      ]
    }
  },

  onLoad() {
    this.initDate()
  },

  methods: {
    initDate() {
      const now = new Date()
      const month = now.getMonth() + 1
      const date = now.getDate()
      this.currentDate = `${month}月${date}日`

      const weekdays = ['日', '一', '二', '三', '四', '五', '六']
      this.weekday = weekdays[now.getDay()]
    },

    navigateTo(page) {
      console.log('Navigate to:', page)
      // uni.navigateTo({
      //   url: `/pages/${page}/index`
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.home-container {
  background: linear-gradient(180deg, #010928 0%, #010928 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
  font-weight: 400;
  font-size: 11px;
  color: #fff;
}

.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding-top: var(--status-bar-height, 44px);
  backdrop-filter: blur(10px);

  .navbar-content {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;

    .navbar-title {
      color: #ffffff;
      font-size: 18px;
      font-weight: 500;
      text-align: center;
    }

    .navbar-actions {
      display: flex;
      gap: 12px;

      .action-icon {
        width: 24px;
        height: 24px;
      }
    }
  }
}

.main-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 293px;
  overflow: hidden;

  .bg-image {
    width: 100%;
    height: 100%;
  }
}

.date-section {
  padding: calc(var(--status-bar-height, 44px) + 60px) 20px 0;
  color: #ffffff;

  .lunar-date {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 8px;
  }

  .date-info {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;

    .date {
      font-size: 16px;
      opacity: 0.8;
    }

    .weekday {
      font-size: 16px;
      opacity: 0.8;
    }
  }

  .fortune-tags {
    display: flex;
    gap: 12px;

    .tag {
      background: rgba(255, 255, 255, 0.15);
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 12px;
      backdrop-filter: blur(10px);
    }
  }
}

.calculation-section {
  padding: 40px 20px 0;
  position: relative;

  .section-title {
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    position: relative;

    >view {
      position: relative;
      z-index: 9;
    }

    &::after {
      content: '';
      position: absolute;
      bottom: 0px;
      left: 0px;
      display: block;
      width: 100%;
      height: 8px;
      background: url(/static/img/index/Vector3.png) 2px bottom no-repeat;
      background-size: 33px 8px;
      z-index: 0;
    }
  }

  .calculation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

    .calc-item {
      position: relative;
      aspect-ratio: 1;
      display: flex;
      flex-direction: column;
      align-items: end;
      justify-content: top;
      border-radius: 4px;
      overflow: hidden;
      padding: 8px 10px;
      width: 100%;
      height: 78px;

      .calc-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
      }

      .calc-title {
        font-size: 13px;
        z-index: 1;
        margin-bottom: 4px;
      }

      .calc-subtitle {
        font-size: 13px;
        z-index: 1;
      }
    }
  }
}

.constellation-section,
.calendar-section,
.zodiac-section {
  padding: 40px 20px 0;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    .section-title {
      color: #ffffff;
      font-size: 20px;
      font-weight: bold;
      position: relative;

      >view {
        position: relative;
        z-index: 9;
      }

      &::after {
        content: '';
        position: absolute;
        bottom: 0px;
        left: 0px;
        display: block;
        width: 100%;
        height: 8px;
        background: url(/static/img/index/Vector3.png) 2px bottom no-repeat;
        background-size: 33px 8px;
        z-index: 0;
      }

      &.long {
        &::after {
          background: url(/static/img/index/Vector2.png) 2px bottom no-repeat;
          background-size: 76px 8px;
        }
      }
    }

    .more-btn {
      display: flex;
      align-items: center;
      gap: 4px;

      .more-text {
        color: rgba(255, 255, 255, 0.6);
        font-size: 14px;
      }

      .arrow-icon {
        width: 12px;
        height: 12px;
      }
    }
  }
}

.constellation-card,
.calendar-card,
.zodiac-card {
  margin-top: 10px;
  background: linear-gradient(134deg, rgba(55, 101, 95, 0.7), rgba(53, 33, 129, 0.7));
  border-radius: 8px;
  padding: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid #37655F;
  position: relative;
}

.custom-card {
  background: linear-gradient(134deg, rgba(114, 122, 174, 0.3), rgba(81, 143, 128, 0.3));
  padding: 10px;
  border: 1px solid #37655F;
  border-radius: 8px;
}

.constellation-header,
.calendar-header,
.zodiac-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;

  .constellation-info,
  .zodiac-info {
    display: flex;
    align-items: center;
    gap: 8px;

    .constellation-icon,
    .zodiac-avatar {
      width: 24px;
      height: 24px;
    }

    .constellation-name,
    .zodiac-name {
      color: #ffffff;
      font-size: 16px;
    }
  }

  .calendar-date {
    .lunar-text {
      color: #ffffff;
      font-size: 18px;
      font-weight: bold;
      display: block;
      margin-bottom: 4px;
    }

    .solar-date {
      color: rgba(255, 255, 255, 0.7);
      font-size: 14px;
    }
  }

  .tag-icon,
  .calendar-tag,
  .zodiac-tag {
    width: 20px;
    height: 20px;
  }
}

.constellation-content {
  .constellation-main {

    .constellation-image {
      width: 80px;
      height: 80px;
      border-radius: 8px;
    }

    .constellation-details {
      flex: 1;

      .constellation-title {
        color: #ffffff;
        font-size: 16px;
        font-weight: bold;
        display: block;
        margin-bottom: 4px;
      }


    }

    .constellation-date {
      color: rgba(255, 255, 255, 0.7);
      font-size: 12px;
      display: block;
      margin-bottom: 12px;
    }

    .fortune-ratings {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 12px;

      .rating-item {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;

        .rating-label {
          color: rgba(255, 255, 255, 0.8);
          font-size: 14px;
          min-width: 60px;
        }

        .stars {
          display: flex;
          gap: 2px;

          .star {
            width: 12px;
            height: 12px;
          }
        }
      }
    }

    .lucky-items {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;

      .lucky-label {
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
      }

      .lucky-value {
        color: #EEA348;
        font-size: 14px;
        font-weight: bold;
      }
    }
  }
}

.calendar-content {
  .calendar-item {
    display: flex;
    margin-bottom: 12px;

    .calendar-label {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: bold;
      margin-right: 12px;
      flex-shrink: 0;
    }

    .calendar-text {
      color: rgba(255, 255, 255, 0.8);
      font-size: 12px;
      line-height: 1.4;
      flex: 1;
    }

    &.good .calendar-label {
      background: #4ade80;
      color: #ffffff;
    }

    &.bad .calendar-label {
      background: #ef4444;
      color: #ffffff;
    }
  }


}

.time-info {
  margin-top: 16px;

  .time-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;

    .time-item {
      text-align: center;

      .time-char {
        color: rgba(238, 238, 238, 1);
        font-size: 12px;
        display: block;
      }

      .time-desc {
        color: rgba(238, 238, 238, 1);
        font-size: 12px;
      }
    }
  }
}

.zodiac-info {
  .zodiac-details {
    .zodiac-name {
      color: #ffffff;
      font-size: 16px;
      font-weight: bold;
      display: block;
      margin-bottom: 4px;
    }

    .zodiac-percentage {
      color: rgba(255, 255, 255, 0.7);
      font-size: 14px;
    }
  }
}

.zodiac-fortune {
  margin-bottom: 16px;

  .fortune-row {
    display: flex;
    gap: 24px;
    margin-bottom: 8px;

    .fortune-item {
      display: flex;
      flex: 1;
      gap: 8px;

      .fortune-label {
        color: rgba(255, 255, 255, 1);
        font-size: 14px;
      }

      .fortune-value {
        color: rgba(238, 163, 72, 1);
        font-size: 14px;
        font-weight: bold;
      }
    }
  }
}

.zodiac-description {
  .description-title {
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
  }

  .description-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    line-height: 1.5;
  }
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(15, 20, 25, 0.95);
  backdrop-filter: blur(10px);
  display: flex;
  z-index: 1999;
  padding: 8px 0 calc(env(safe-area-inset-bottom) + 8px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);

  .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;

    .nav-icon {
      width: 24px;
      height: 24px;
    }

    .nav-text {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.6);
    }

    &.active .nav-text {
      color: #ffffff;
    }
  }
}
</style>
